<template>
  <el-dialog title="用户新增" :visible.sync="dialogUserAdd" width="400px">
    <el-form
      :model="userForm"
      :rules="rules"
      ref="userForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="20">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="userForm.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="姓名" prop="nickName">
            <el-input v-model="userForm.nickName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userForm.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input v-model="userForm.phonenumber"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="20">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="userForm.sex" placeholder="请选择性别">
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel('userForm')">取 消</el-button>
      <el-button type="primary" @click="addData('userForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogUserAdd: false,
      userForm: {
        userName: "",
        nickName: "",
        email: "",
        phonenumber: "",
        sex: "",
      },
      rules: {
        userName: [
          {
            required: true,
            pattern: /^([\w\@.]{1,14})$/g,
            message:
              "请输入正确的用户名：只能是数字，字母_@.区分大小写 ,1-14个字符",
            trigger: "blur",
          },
        ],
        nickName: [
          {
            required: true,
            pattern: /^([\u4e00-\u9fa5]){2,7}$/,
            message: "请输入正确的名字",
            trigger: "blur",
          },
        ],
        // email: [
        //   {
        //     required: true,
        //     pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
        //     message: "请输入正确的邮箱",
        //     trigger: "blur",
        //   },
        // ],
        // phonenumber: [
        //   {
        //     required: true,
        //     pattern:
        //       /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
        //     message: "请输入正确的手机号",
        //     trigger: "blur",
        //   },
        // ],
        // sex: [
        //   {
        //     required: true,
        //     message: "请输入性别",
        //     trigger: "blur",
        //   },
        // ],
      },
    };
  },
  methods: {
    openDialog(flag) {
      this.dialogUserAdd = flag;
      // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。
      // 在修改数据之后立即使用它，然后等待 DOM 更新。
      // 它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
      this.$nextTick(() => {
        //修改数据后用此方法可立即获得更新后的数据
        this.$refs.userForm.resetFields();
      });
    },
    cancel(userForm) {
      this.dialogUserAdd = false;
      // this.$refs[userForm].resetFields();
    },
    addData(userForm) {
      console.log(this.userForm);
      this.dialogUserAdd = false;
      this.$message("添加成功");
    },
  },
};
</script>

<style scoped>
</style>